
<template>
    
    <div>
        <!--粒子组件 -->
        <vue-particles
            id="tsparticles"
            :particlesInit="particlesInit"
            :options="options"/>
        
        <div class="formContainer">
            <h3>物业收费管理系统</h3>
            <el-form
                ref="loginFormRef"
                :model="loginForm" 
                status-icon
                :rules="loginRules"
                label-width="70px" 
                class="loginform">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="验证码" prop="captcha" >
                    <el-input v-model="loginForm.captcha" autocomplete="off" style="width:150px;margin-right: 20px;"/>
                    <div id="captchaBox">
                        <div v-html="captchaData" style="background:white"></div>
                    </div>
                    <el-icon id="icon" @click="changeCaptcha()" ><Refresh /></el-icon>
                </el-form-item>
                <el-form-item style="padding-left:80px;">
                    <el-button type="primary" @click="submitForm()" style="font-size:20px;height:60px;width:200px;">登陆</el-button>
                </el-form-item>
            </el-form>
        </div>


        <!-- <button @click="handleLogin">login</button> -->
    </div>
</template>
<!--设置本地存储-->
<script setup>
    import {Refresh} from "@element-plus/icons-vue";
    import {reactive,ref,onMounted,} from "vue"
    import { loadFull } from "tsparticles"//粒子库中一个
    import { useRouter } from "vue-router"
    import axios from "axios"
    import { ElMessage } from 'element-plus'
    import { useStore } from "vuex"

    const captchaData = ref()
    const captchaText = ref()
    onMounted(() => {
        getCaptcha();
    });
    const getCaptcha = async () => {
        // console.log("获取验证码")
        const res2 = await axios.post("/adminapi/user/login",loginForm);
        captchaData.value = res2.data.captchaData.data
        captchaText.value = res2.data.captchaData.text
    };

    const changeCaptcha= ()=>{ //改变验证码
        getCaptcha()
    }

    const store = useStore()
    const loginForm = reactive({ //动态变量
        username:"",
        password:"",
        captcha:"",
    })//表单绑定的响应式对象

    const loginFormRef = ref() //get表单的引用对象

    const loginRules = reactive({ //表单验证规则
        username:[
            {
                required:true,message:"请输入用户名",trigger:"blur"
            }
        ],
        password:[
            {
                required:true,message:"请输入密码",trigger:"blur"
            }
        ],
        captcha:[
            {
                required:true,message:"请输入验证码",trigger:"blur"
            }
        ],
    })
    
const router = useRouter()
//提交表单函数
const submitForm = ()=>{
    //1.校验表单
    loginFormRef.value.validate((valid)=>{
        if(valid){
            // console.log(loginForm.captcha)
            axios.post("/adminapi/user/login",loginForm)//反向代理路径 vue.config.js文件里
            .then(res=>{
                if(captchaText.value.toLowerCase()===loginForm.captcha.toLowerCase()){
                    if(res.data.ActionType==="OK"){
                    // console.log(res.data.data)
                    store.commit("changeUserInfo",res.data.data)
                    store.commit("changeGetterRouter",false)
                    router.push("/index")

                    }else{
                        ElMessage.error('用户名密码验证码不匹配')
                    }
                }else{
                    ElMessage.error('验证码不正确')
                }
            })
            // router.push("/index")
        }
    })
    
}



    //配置particles
    const particlesInit = async (engine) => {//粒子库
    await loadFull(engine)
    }
    const options = {
                    background: {
                        color: {
                            value: "#2d3a4b"//'#81eb96'
                        }
                    },
                    fpsLimit: 120,
                    interactivity: {
                        events: {
                            onClick: {
                                enable: true,
                                mode: 'repulse'//可用的click模式有: "push", "remove", "repulse", "bubble"
                            },
                            onHover: {
                                enable: true,
                                mode: 'bubble'// 可用的hover模式有: "grab", "repulse", "bubble"
                            },
                            resize: true
                        },
                        modes: {
                            bubble: {
                                distance: 400,
                                duration: 2,
                                opacity: 0.8,
                                size: 40
                            },
                            push: {
                                quantity: 4
                            },
                            repulse: {
                                distance: 200,
                                duration: 0.4
                            }
                        }
                    },
                    particles: {
                        color: {
                            value: '#ffffff'
                        },
                        links: {
                            color: '#ffffff',
                            distance: 150,
                            enable: true,
                            opacity: 0.5,
                            width: 1
                        },
                        collisions: {
                            enable: true
                        },
                        move: {
                            direction: 'none',
                            enable: true,
                            outMode: 'bounce',
                            random: false,
                            speed: 1,
                            straight: false
                        },
                        number: {
                            density: {
                                enable: true,
                                area: 800
                            },
                            value: 80
                        },
                        opacity: {
                            value: 0.5
                        },
                        shape: {
                            type: 'circle'// 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
                        },
                        size: {
                            random: true,
                            value: 5
                        }
                    },
                    detectRetina: true
                }


</script>


<style lang="scss" scoped>
    .formContainer{
        width:500px;
        height: 300px;
        position: fixed; //定位
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);//平移
        background:rgba($color:#000000,$alpha:0.5);
        color:white;
        text-align: center;
        padding: 20px;

        h3{
            font-size: 30px;
        }
        .loginform{
            margin-top: 20px;
        }
        #icon{
            margin-left: 10px;
            font-size: 30px;

        }
        #icon:hover{
            cursor: pointer; /* 鼠标移上去时将光标样式设置为手形 */
        }
    }

//v-deep深度匹配
::v-deep .el-form-item__label{
    color:white
}
</style>